<!-- 首页卡片组件 -->
<template>
  <div class="cardView">
    <router-link :to="`/songlist?id=${item.id}`" class="remd_li" v-for="item in reList" :key="item.id">
      <div class="remd_img">
        <img class="u-img" :src="item.picUrl" alt="" />
        <span class="u-earp remd_lnum">{{ num(item.playCount) }}</span>
        <i v-if="item.highQuality" class="remd_high"></i>
      </div>
      <span class="remd_text">{{ item.name }}</span>
    </router-link>
  </div>
</template>

<script setup name="CardView">
import { ref, computed, onMounted } from 'vue'
import { numberFormat } from '@/utils/common'
import { recommendMusicAPI } from '@/api'

let reList = ref([]) // 推荐歌单数据

// 数字格式化
let num = computed(() => {
  return (val) => {
    return numberFormat(val)
  }
})

onMounted(() => {
  recommendMusicAPI({ limit: 6 }).then((res) => {
    reList.value = res.data.result
  })
})

</script>

<style lang="scss" scoped>
.cardView {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .remd_li {
    width: 33%;
    margin-bottom: 16px;
    box-sizing: border-box;

    .remd_img {
      position: relative;
      padding-bottom: 100%;

      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 20px;
        z-index: 2;
        background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
      }

      .u-img {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        vertical-align: middle;
      }

      .remd_lnum {
        position: absolute;
        right: 5px;
        top: 2px;
        z-index: 3;
        padding-left: 13px;
        color: #fff;
        font-size: 12px;
        background-position: 0;
        background-repeat: no-repeat;
        background-size: 11px 10px;
        text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
      }

      .u-earp {
        background-image: url('../assets/img/erji.svg');
      }

      .remd_high {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 5;
        width: 20px;
        height: 20px;
        background: url('../assets/img/huangguan.svg') 0 no-repeat;
        background-size: contain;
      }
    }

    .remd_text {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      padding: 6px 2px 0 6px;
      min-height: 30px;
      line-height: 1.2;
      font-size: 13px;
      color: #333;
    }
  }
}
</style>
